<form class="sidebar-search">
  <input type="text"
         aria-label="Search in docs" name="search"
         placeholder="Search..." [(ngModel)]="search.text"/>

  <button id="mobile-main-menu" (click)="toggle()">
    <img src="assets/images/icons/menu-left.svg" alt="left menu">
  </button>
</form>
<div class="mobile-menu">
  <div class="bootstrap-version">
    <span>Bootstrap: </span>
    <button class="btn" [class.selected]="isBs3" (click)="installTheme('bs3')">3</button>
    <button class="btn" [class.selected]="!isBs3" (click)="installTheme('bs4')">4</button>
  </div>
  <div class="sidebar-content" *ngIf="routes && routes.length">
    <ul class="sidebar-list">
      <li [routerLinkActive]="['active']"
          [routerLinkActiveOptions]="{exact: true}">
        <a routerLink="/{{routes[1].path}}">{{routes[1].data}}</a>
      </li>
    </ul>

    <h4 class="sidebar-title">Components</h4>
    <ul class="sidebar-list">
      <li *ngFor="let route of routes | slice:2 | SearchFilter:search.text"
          [routerLinkActive]="['active']"
          [routerLinkActiveOptions]="{exact: true}">
        <a routerLink="/{{route.path}}">{{route.data[0]}}</a>
      </li>
    </ul>
  </div>
</div>
